Vertical Navigation

SAMPLE CODE

<Style>
  
	body {
	width:100%;
	font-family: geergia, "times New roman", Times. serif;
	font-size: 1em;
	background-color: white;
	color: black
	
	}
	
	
	div#vernavbar1  {
	 clear: both;
	 background-color: blue;
	 display: inline-block;  /* shrinks the navbar to be as wide as the widest emlement*/
	 }
	
	div#vernavbar1 ul {
	 list-style-type: none;
	 padding-left: 0;
	 
	}
	
	div#vernavbar1 ul li {
	 padding: 0 1em .3em 1em; /* expands the block horizontally.  the .3em places padding between each list item */
	}
	
	div#vernavbar1 ul li a{
	
	 font-family: Arial, Helvetica, sans_serif;
	 font-size: 1.1em;
	 font-weight: 900;
	 text-decoration: none;
	 color: white;
	 
	}
	
	
	div#vernavbar2  {
	 clear: both;
	 
	 display: inline-block;  /* shrinks the navbar to be as wide as the widest emlement*/
	 }
	
	div#vernavbar2 ul {
	 list-style-type: none;
	 padding-left: 0;
	 
	}
	
	div#vernavbar2 ul li {
	 background-color: blue;
	 padding: 0 1em .25em 1em; /* expands the block horizontally.  the .3em places padding between each list item */
	
	}
	
	div#vernavbar2 ul li a{
	
	 font-family: Arial, Helvetica, sans_serif;
	 font-size: 1.1em;
	 font-weight: 900;
	 text-decoration: none;
	 color: white;
	 display: block;
	 padding: .35em;
	 
	}
	
	------------------------------------------------------------------------------
	
	<h3>Vertical Navigation</h3>

<div id="vernavbar1">
  <ul>
	 <li><A HREF="../../index.html"                 title="Home">Home1</A> </li>
	 <li><A HREF="../RayHome.html"                  title="Ray" >Ray</A>  </li>
	 <li><A HREF="../../Diane/DianeHome.html"       title="Diane">Diane</A> </li>
	 <li><A HREF="../../Nick/NickHome.html"         title="Nick">Nick</A> </li>
	 <li><A HREF="../../Juliana/JulianaHome.html"   title="Juliana">Juliana</A>  </li>
	 
	</ul>
	</div>
	
	<br><br><br>
	
	<div id="vernavbar2">
  <ul>
	 <li><A HREF="../../index.html"                 title="Home">Home2</A> </li>
	 <li><A HREF="../RayHome.html"                  title="Ray" >Ray</A>  </li>
	 <li><A HREF="../../Diane/DianeHome.html"       title="Diane">Diane</A> </li>
	 <li><A HREF="../../Nick/NickHome.html"         title="Nick">Nick</A> </li>
	 <li><A HREF="../../Juliana/JulianaHome.html"   title="Juliana">Juliana</A>  </li>
	 
	</ul>
	</div>

</style>